<template>
  <div class="flex-c mt10" style="margin-bottom: 10px">
    <a-input v-model="searchVal.eventMsg" style="width: 200px; margin-right: 5px" placeholder="日志内容" allow-clear />
    <a-input v-model="searchVal.createUname" style="width: 120px; margin-right: 5px" placeholder="操作人" allow-clear />
    <a-range-picker v-model="searchVal.times" style="width: 254px; margin-right: 5px" allow-clear valueFormat="YYYY-MM-DD HH:mm:ss" :timePickerProps="{ defaultValue: ['00:00:00', '23:59:59'] }" />
    <a-button type="outline" @click="searchByVal">搜索</a-button>
  </div>
  <div class="table-model-wrap">
    <a-table size="mini" :loading="tableLoading" :data="tableList" :scroll="{ y: 'calc(84vh - 200px)' }" :bordered="false" class="table-two-line table-model" :pagination="false">
      <template #columns>
        <a-table-column title="序号" :width="45">
          <template #cell="{ rowIndex }">
            <p>{{ rowIndex + 1 }}</p>
          </template>
        </a-table-column>
        <a-table-column title="时间" :width="150">
          <template #cell="{ record }">
            <p>{{ $setTime(record.gmtCreate) }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="createUname" title="操作人" :width="80" />
        <a-table-column data-index="eventName" title="事件" :width="150" />
        <a-table-column data-index="eventMsg" title="描述" />
        <a-table-column title="内容" :width="120">
          <template #cell="{ record }">
            <a-button type="outline" size="small" @click="openDataDetail(record)">查看内容</a-button>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <div class="pagination-footer">
      <a-pagination size="mini" :total="total" :default-page-size="searchVal.pageSize" :current="searchVal.pageNum" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size @page-size-change="sizeChange" @change="changePage" />
    </div>
  </div>
  <DataComparison v-if="shopDataJson" :isShow="shopDataJson" :currentData="currentData" @closed="shopDataJson = false" />
</template>
<script lang="ts" setup>
  import { ref, onMounted, defineComponent } from 'vue'
  import DataComparison from './dataComparison.vue'
  import * as purchaseLogApi from '@/api/logs'
  const emit = defineEmits(['closed'])
  const props = defineProps({
    id: {
      type: String,
    },
    api: {
      type: String,
      default: 'findPurchasePlanLogPage',
    },
  })
  onMounted(() => {
    getTableList()
  })

  const tableLoading = ref(false)
  const shopDataJson = ref(false)
  const currentData = ref<any>({})
  const total = ref(0)
  const tableList = ref<Array<any>>([])
  let searchVal = ref<any>({
    billId: props.id,
    pageSize: 20,
    pageNum: 1,
  })
  // 分页
  function changePage(val: number) {
    searchVal.value.pageNum = val
    getTableList()
  }
  function sizeChange(val: number) {
    searchVal.value.pageSize = val
    getTableList()
  }
  //日志列表
  async function getTableList() {
    let params = JSON.parse(JSON.stringify(searchVal.value))
    params.dataType = 'gmtCreate'
    params.startDate = params.times?.[0]
    params.endDate = params.times?.[1]
    delete params.times
    tableLoading.value = true
    const res: any = await purchaseLogApi[props.api](params)
    tableLoading.value = false
    total.value = res?.data?.total || 0
    tableList.value = res?.data?.records || []
  }
  // 开始查询
  function searchByVal() {
    searchVal.value.pageNum = 1
    getTableList()
  }
  function openDataDetail(item: any) {
    currentData.value = item
    shopDataJson.value = true
  }
</script>
<script lang="ts">
  export default defineComponent({
    name: 'CommonLogsDialog',
  })
</script>

<style lang="less" scoped>
  .pagination-footer {
    margin-top: 10px;
  }
</style>
